<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>


<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>


<script type="text/javascript">

    var myChart = echarts.init(document.getElementById('main'));

    $.ajax({
        //type: "post",
        url:"${pageContext.request.contextPath}/getSex",
        //dataType:"json",
        success:function(s){
            var nan = s.nan;
            var nv = s.nv;


        // 基于准备好的dom，初始化echarts实例


        // 指定图表的配置项和数据
            var option = {
        //        图表的标题
                title: {
                    text: '男女性别统计'
                },
                tooltip: {},
        //        设置当前的图表中 需要展示多少种数据的类型  例如 销量数据  性别  日期
                legend: {
                    data:['性别']
                },
        //        横坐标  x轴
                xAxis: {
                    data: ["男","女"]
                },
        //        y轴
                yAxis: {},

                series: [{
        //            name的值 必须和legend data中的值 对应上
                    name: '性别',
        //            设置展示的样式  bar柱状图  line 折线图 pie 饼状图
                    type: 'bar',
        //            此处的数据个数 需要和x轴一致  赋值的时候需要赋值js对象 还是Json字符串
                    data: [nan, nv]
                }]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        },
    })
</script>